<template>
    <div class="meeting">
        <!-- 标准表格 stripe-->
        <el-table ref="standardTable"
            :loading="loading"
            :maxHeight="maxHeight"
            border 
            :stripe='stripe'
            :data="props_data" :tooltip-effect="tooltip" style="width: 100%" @selection-change="handleSelectionChange">
            <slot name="table_before"/>
            <template v-for="(item,index) in columns">
                <!-- 表头全选 -->
                <el-table-column show-overflow-tooltip v-if="item.type=='selection'" :fixed="item.fixed" :align="item.align" :key="index" :width="item.width" :type="item.type"></el-table-column>
                <!-- 数据字典转换 -->
                <el-table-column show-overflow-tooltip v-if="item.type=='dictionary'" :fixed="item.fixed" :align="item.align" :key="index" :prop="item.prop" :label="item.label" :width="item.width"
                >
                    <template slot-scope="scope">
                        {{typeFormatter(item.prop,item.dictData.typeName,item.dictData.typeCode,scope.row[item.prop])}}
                    </template>
                </el-table-column>
                <!-- 自定义数据字典转换 -->
                <el-table-column show-overflow-tooltip v-if="item.type=='customDictionary'" :fixed="item.fixed" :align="item.align" :key="index" :prop="item.prop" :label="item.label" :width="item.width"
                :formatter="item.filterProp"></el-table-column>
                <!-- 普通列 -->
                <el-table-column show-overflow-tooltip v-else-if="item.isShow && item.type!='selection'" :fixed="item.fixed" :align="item.align" :key="index" :prop="item.prop" :label="item.label" :width="item.width">
                </el-table-column>
            </template>
            <slot name="table_after"/>
        </el-table>
        <!--分页-->
        <el-pagination
            v-if="isTable"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            style="text-align: right;margin:10px 0;"
            :current-page="props_pageNo"
            :page-size="pageSize"
            :page-sizes="pageSizeOpt"
            :total="props_total"
            layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
    </div>
</template>
<script>
    export default {
        name: "StandardTable",
        props: {
            url:String,
            apiName: Function,
            tooltip:String,//dark
            columns: {
                type: Array,
                default: () => []
            },
            tableData: {
                type: Array,
                default: () => []
            },
            stripe: {
                type: Boolean,
                default: false
            },
            pageSizeOpt:{
                type: Array,
                default() {
                    return [10, 20, 30, 50, 100];
                }
            },
            pageNum: {
                type: Number,
                default: 1
            },
            pageSize: {
                type: Number,
                default: 10,
            },
            maxHeight: {
                type: Number,
                default: 2000
            },
        },
        data() {
            return {
                isTable:true,
                loading:false,
                props_data: [],
                props_total: 0,
                props_pageNo: this.pageNum,
                props_query: {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize
                },
                saveData:[],
                rowNum:1,
                checkedDetail:[],
                formatterList:{
                    "sex":[{"value":1,"type":"男"},{"type":"女","value":0}],
                    "IS_MARRY":[{isMarry:1,name:"是"},{isMarry:0,name:"否"}],
                    "STATE":[{"state":0,"type":'提交'},{"state":1,"type":'审核中'},{"state":2,"type":'已通过'},{"state":3,"type":'已拒绝'}],
                    "LEVEL":[{"level":"1","type":"一级"},{"level":"2","type":"二级"},{"level":"3","type":"三级"}]
                },
            }
        },
        created(){
            this.saveDataInit();
        },
        methods: {
            // 数据字典
            //查询
            query(arg) {
                let that = this;
                this.loading = true;
                let param = {};
                if(arg && arg.pageNum){
                    param.pageNum = arg.pageNum;
                }
                Object.assign(param,arg)
                let apiName = that.apiName;
                if(!apiName){
                    that.props_data = that.tableData ? that.tableData : [];
                    that.saveData = that.tableData ? [...that.tableData] : [];
                    that.saveDataInit();
                    return;
                }
                // debugger
                apiName(param).then(res => {
                // axios.post(url,param).then(res => {
                    that.loading = false;
                    res = res && res.rspBody ? res.rspBody : {}
                    if(JSON.stringify(res) == '{}'){
                        console.log('11')
                        // that.props_data = []
                        // that.saveData = []
                        // debugger
                        that.props_data = that.tableData//暂时 只是为了效果展示
                        that.saveData = that.tableData ? [...that.tableData] : [];//暂时 只是为了效果展示
                        that.props_pageNo = that.pageNum || 1;//暂时 只是为了效果展示
                        that.props_total = that.tableData.length;//暂时 只是为了效果展示
                        that.saveDataInit();//暂时 只是为了效果展示
                        return 
                    }
                    res.resultData = res.resultData ? res.resultData : []
                    that.props_data = res.resultData;
                    that.props_pageNo = res.pageNum || 1;
                    that.props_total = res.total ? res.total :0;
                    that.saveDataInit();
                    that.$emit('queryResult', res);
                });
            },
            handleCurrentChange(page) {
                var changeFlag = false;
                for(var i=0;i<this.saveData.length;i++){
                    if(this.saveData[i].opt&&this.saveData[i].opt == "insert"||this.saveData[i].opt == "update"||this.saveData[i].opt == "delete"){
                        changeFlag = true;
                        break;
                    }
                }
                if(changeFlag){
                    this.$alert("请先保存修改再切换分页", "提示");
                    return false;
                }
                this.query({
                    pageNum:page
                });
            },
            // 初始化数据
            saveDataInit(){
                for(var i=0;i<this.props_data.length;i++){
                    this.props_data[i].rowNum = this.rowNum;
                    this.rowNum++;
                }
                this.saveData = [...this.props_data];
            },
            handleSizeChange(size){
                this.query({
                    pageNum:1,
                    pageSize:size
                });
            },
            formatterValue(row, column, cellValue) {
                return cellValue;
            },
            // 选中的数据
            handleSelectionChange(selection) {
                this.checkedDetail = selection;
                this.$emit('selectionChange', selection);
            },
            // 小代码转换
            typeFormatter(valueName,stringName,arrName,value){
                // 未转换字段名 valueName
                // 转换后字段名 stringName
                // 转换数组名 arrName
                // 当前转换的值 value
                for (var i in this.formatterList[arrName]) {
                    if (this.formatterList[arrName][i][valueName] == value){
                        return this.formatterList[arrName][i][stringName];
                    }
                }
            },
        }
    };
</script>
<style>
/* lang="less"  */
.meeting{
    width: 100%;
    margin-top: 10px;
}
.el-table{
    overflow:auto;
}
.el-table .el-table__header th{
    background-color:#f8f8f9;
    color:#515a6e;
}
.el-table td, .el-table th {
    padding:8px 0;
    
}
/*  */
</style>